<script lang="ts" setup>
import { updateRole } from "@/api/modules/system";
import type { UpdateRoleParams } from "@/api/modules/system/types";
import { message } from "@/utils/message";
import type { PlusColumn } from "plus-pro-components";
import { PlusDrawerForm } from "plus-pro-components";
import "plus-pro-components/es/components/drawer-form/style/css";
import { ref, watch } from "vue";

defineOptions({
  name: "role-edit-form"
});

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  row: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(["update:visible", "refresh"]);

const visible = ref(props.visible);
const loading = ref(false);

// 监听visible变化，当抽屉打开时加载数据
watch(
  () => props.visible,
  newVal => {
    visible.value = newVal;
  }
);

// 监听visible变化，当抽屉关闭时通知父组件
watch(
  () => visible.value,
  newVal => {
    emit("update:visible", newVal);
  }
);

const rules = {
  name: [
    {
      required: true,
      message: "请输入角色名称"
    }
  ],
  code: [
    {
      required: true,
      message: "请输入角色编码"
    }
  ]
};

const state = ref<UpdateRoleParams>({
  id: props.row?.id,
  name: props.row?.name,
  code: props.row?.code,
  description: props.row?.description,
  status: props.row?.status
});

// 监听row变化，当row变化时更新state
watch(
  () => props.row,
  newVal => {
    if (newVal) {
      state.value = {
        id: newVal.id,
        name: newVal.name,
        code: newVal.code,
        description: newVal.description,
        status: newVal.status
      };
    }
  },
  { deep: true }
);

const columns: PlusColumn[] = [
  {
    label: "角色名称",
    prop: "name",
    valueType: "copy"
  },
  {
    label: "角色编码",
    prop: "code",
    valueType: "copy"
  },
  {
    label: "角色描述",
    prop: "description",
    valueType: "textarea"
  },
  {
    label: "状态",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "启用",
        value: 1
      },
      {
        label: "禁用",
        value: 0
      }
    ]
  }
];

const handleCancel = () => {
  visible.value = false;
};

const handleConfirm = async () => {
  loading.value = true;
  try {
    await updateRole(state.value).then(res => {
      if (res.success) {
        message("更新成功", { type: "success" });
        // 触发 refresh 事件，通知父组件刷新表格数据
        emit("refresh");
        handleCancel();
      }
    });
  } catch (error) {
    console.error("更新角色失败", error);
    message("更新失败", { type: "error" });
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <PlusDrawerForm
    v-if="visible"
    v-model:visible="visible"
    v-model="state"
    :loading="loading"
    title="编辑角色"
    size="25%"
    :form="{ columns, rules, labelPosition: 'right', labelWidth: 90 }"
    @cancel="handleCancel"
    @confirm="handleConfirm"
  >
    <template #plus-field-description>
      <el-input
        v-model="state.description"
        type="textarea"
        :rows="3"
        placeholder="请输入角色描述"
      />
    </template>
  </PlusDrawerForm>
</template>
